<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
	<title>Hẹn khám trực tuyến - <s:property value="location.name" /></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content='<s:property value="location.name" /> <s:property value="location.address" />' />
	<meta name="keywords" content='<s:property value="@com.ohs.fo.action.ActionUtil@genKeyword(location.name)"/>' />
	<script type="text/javascript" src="<%= request.getContextPath() %>/js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="<%= request.getContextPath() %>/js/ui.datepicker-vi.js"></script>
	<script type="text/javascript" src="<%= request.getContextPath() %>/js/jquery.validate.min.js"></script> 
	<link href="<%= request.getContextPath() %>/css/jquery-ui.css" rel="stylesheet" type="text/css"/>
	<link href="<%= request.getContextPath() %>/css/schedule.css" rel="stylesheet" type="text/css" />
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script type="text/javascript">
	function formatTime(number) {
		return (number < 10) ? "0" + number : number;	
	}
	
	$(function() {
	 	$("#date").datepicker({
	 		onSelect: function(dateText, inst) {
 				$("#selectedTime").val("");
	 			$("#dateText").html(dateText);
	 			var roomId = $("#selectedRoom").val();
	 			if ($("#roomOptions").length > 0) {
	 				roomId = $("#roomOptions").val();
	 				if (!roomId || roomId == '') {
		 				roomId = $("#roomOptions option:first").val();
		 			}
	 			}
	 			
	 			var action = '<%=request.getContextPath() %>/home/getTime.action?roomId=' + roomId;
	 			action += '&selectedDate=' + dateText + '&username=' + $("#username").val();
	 			$.ajax({
	 		       type: 'GET',
	 		       url: action,
	 		       dataType: 'json',
	 		       success: function(data){
 		               var bookingTime = $("#bookingTime");
 		               if (data.timeSlots.length > 0) {
 		            	  var html = "<ul>";
 		            	  for (i=0; i < data.timeSlots.length; i++) {
 		            		  var obj = data.timeSlots[i].split(" ");
 		            		  if (obj[1] === "true") {
	            			  	 html += "<li><div class='not-registered'><a class='timeSlot' href='javascript:void(0);'>" + obj[0] + "</a></div></div></li>";
	            			  } else {
	            				 html += "<li><div class='registered'>" + obj[0] + "</div></div></li>";
	            			  }
 		            	  }
 		            	   
 		            	  html += "</ul>";
 		            	  bookingTime.html(html);
 		            	  
 		            	  $("#selectedDate").val(dateText);
 		            	  //$("#bookingForm").valid();
 		            	 
 		            	  $(".timeSlot").click(function() {
 		            		  $("#selectedTime").val($(this).html());
 		            		  $(".timeSlot").removeClass("selected");
 		            		  $(this).addClass("selected");
 		            		  //$("#bookingForm").valid();
 		            	  });
 		               } else {
 		            	  bookingTime.html("Không làm việc");
 		               }
 		               
 		              $("#roomId").val(roomId);
	 		       }
	 			});
	 		}
	 	});
  	});
	
	$(document).ready(function() {
		$("#bookingForm").validate({
			rules: {
				selectedDate: {
					required: true
				},
				selectedTime: {
					required: true
				},
				name: {
					required: true
				},
				age: {
					required: true,
					range: [0, 150]
				},
				phone: {
					required: true,
					number: true
				},
				captcha: {
					required: true
				}	
			},
			messages: {
				selectedDate: {
					required: "Vui lòng chọn ngày khám"
				},
				selectedTime: {
					required: "Vui lòng chọn giờ khám"
				},
				name: {
					required: "Vui lòng điền tên"
				},
				age: {
					required: "Vui lòng điền tuổi",
					range: "Tuổi không chính xác"
				},
				phone: {
					required: "Nhập số điện thoại di động đã gửi tin nhắn",
					number: "Số điện thoại không hợp lệ"
				},
				captcha: {
					required: "Nhập mã xác nhận đã nhận qua tin nhắn"
				}
			},
		 	submitHandler: function(form) {
		 		form.submit();
		 	}
		});
		
		if ($("#errorBox")) {
			$("#date").datepicker("setDate", $("#selectedDate").val());
		}
		var theTime = $("#selectedTime").val();
		$(".ui-state-active").click();
		if ($("#errorBox")) {
			$("#selectedTime").val(theTime);
		}
		if ($("#wrongCaptcha").html() !== "") {
			$("#captcha").focus();
			$("#captcha").addClass("boldField");
		}
		
		$("#roomOptions").change(function() {
			$(".ui-state-active").click();
		});
	});
	

	</script>
	<script>
	function initialize() {
		  var latLng = $("#latLng").val();
		  if (latLng !== "") {
			  var myLatlng = new google.maps.LatLng(<s:property value="location.latLng" />);
			  var mapOptions = {
			    zoom: 16,
			    center: myLatlng
			  }
			  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
			
			  var marker = new google.maps.Marker({
			      position: myLatlng,
			      map: map,
			      title: 'Địa chỉ'
			  });
			  //$("#map-canvas").attr("border","1px solid #E5E3DF");
		  }
		}
	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
</head>
 
<body>
<jsp:include page="include/breadcrum.jsp"></jsp:include>
<div class="locationInfo">
	<s:if test='%imageUrl != null && imageUrl != ""'>
		<img src='/home/getImage?pic=<s:property value="imageUrl" />' width="160" />
	</s:if>
	<s:else>
		<img src='<%=request.getContextPath() %>/images/hospital-default.png' width="160" />
	</s:else>
	<div class="detail">
		<h2><s:property value="location.name" /></h2>
		<b>Địa chỉ:</b> <s:property value="location.address" /><br />
		<s:if test="%{location.doctorName != null && location.doctorName != ''}">
			<b>Bác sĩ:</b> <s:property value="location.doctorName"/><br />
		</s:if>
		<b>Chuyên khoa:</b> <s:property value="location.specialties"/><br />
		<p><s:property value="location.info" /></p>
		<input type="hidden" id="latLng" value='<s:property value="location.latLng" />' />
	</div>
	<!--googleoff: all-->
	<div id="map-canvas"></div>
	<!--googleon: all-->
</div>
<s:if test="%{bookingAvailable == true}">
	<div class="bookingTitle">
		<h3>ĐẶT LỊCH KHÁM BỆNH</h3>
	</div>
	<div class="bookingSteps">
		<div class="steps step1">Bước 1: chọn ngày giờ</div>
		<img alt="" src="<%=request.getContextPath()%>/images/steps-separator.png">
		<div class="steps step2">Bước 2: điền thông tin bệnh nhân</div>
		<img alt="" src="<%=request.getContextPath()%>/images/steps-separator.png">
		<div class="steps step3">Bước 3: nhắn tin xác nhận</div>
	</div>
	<s:form id="bookingForm" action="/home/bookingSubmit" method="post">
	<input type="hidden" name="accountName" id="accountName" value='<s:property value="username" />' />
	<s:if test="hasActionErrors()">
		<div id="errorBox" class="error ui-widget-content ui-corner-all"><s:actionerror /></div>
	</s:if>
	<div class="booking">
		<div class="left step1">
			<s:if test="%{rooms.size() > 1}">
			<div class="ui-widget-content ui-corner-all list-register" style="margin-top:10px; padding: 10px;width: 228px;">
					Chọn phòng khám <s:select list="rooms" name="roomOptions" id="roomOptions" listKey="roomId" listValue="name"></s:select>
			</div>
			</s:if>
			<input type="hidden" name="selectedRoom" id="selectedRoom" value='<s:property value="rooms.get(0).roomId" />' />
			<div id="date">
			</div>
			<div class="bookingList">
				<div class="ui-datepicker-inline ui-datepicker ui-widget-content ui-helper-clearfix ui-corner-all list-register">
					<div class="stepTitle ui-datepicker-header ui-widget-header ui-corner-all"><span id="dateText"></span></div>
					<div id="bookingTime">
					</div>
				</div>
				<div class="note">
					<br/>
					<div class="registered"><div>00:00</div></div>
					<div>&nbsp;đã đăng kí</div><br/>
					<div class="not-registered" style="float:left;"><div>00:00</div></div>
					<div>&nbsp;chưa đăng kí</div>
				</div>
			</div>
		</div>
	
	
	<div class="bookingForm">
		<div class="ui-widget-content ui-corner-all list-register">
			<div class="form">
				<br/>
				
				<input id="roomId" name="roomId" type="hidden" /> 
				<input type="hidden" id="username" name="username" value="<s:property value='username' />" />
				<div><span class="requried">*</span>Ngày</div>
				<div><s:textfield id="selectedDate" name="selectedDate" readonly="true"/></div>
				<div><span class="requried">*</span>Giờ</div>
				<div><s:textfield id="selectedTime" name="selectedTime" readonly="true"/></div>
				<div><span class="requried">*</span>Họ và tên: </div>
				<div><s:textfield name="name" id="name" /></div>
				<div><span class="requried">*</span>Tuổi: </div>
				<div><s:textfield name="age" id="age" maxlength="3"/></div>
				<div>Địa chỉ: </div>
				<div><s:textfield name="address" id="address" /></div>
				<div><s:checkbox id="recheck" name="recheck"></s:checkbox><label for="recheck">Tái khám</label></div><br/>
				<div>Triệu chứng bệnh: </div>
				<div><s:textarea id="description" name="description" cols="28" rows="3"></s:textarea></div>
				<br/>
			</div>
		</div>
	</div>
	<div class="right bookingForm">
		<div class="ui-widget-content ui-corner-all list-register">
			<div class="form">
				<br/>
				Để xác thực đăng kí của bạn, vui lòng soạn tin theo cú pháp sau để nhận mã xác nhận:<br/><br/>
				<b class="boldFocus"><s:property value="smsKey"/> <span id="regKey"></span></b><br/><br/>
				Gửi đến tổng đài: <b class="boldFocus"><s:property value="smsTo"/></b>. Giá cước chỉ <b>2000</b>VND/tin<br /><br /><br />
				
				<div><span class="requried">*</span>Số điện thoại di động đã gửi tin nhắn</div>
				<div><s:textfield name="phone" id="phone" /></div>
				<div><span class="requried">*</span>Mã xác nhận đã nhận qua tin nhắn</div>
				<div><s:textfield name="captcha" id="captcha" maxlength="6"/></div>
				<div id="wrongCaptcha" class="error"><s:actionmessage /></div>
				<div><input type="submit" class="submit" value="Đặt hẹn" /></div>
				<!-- <i><b>Lưu ý</b>: mã xác nhận này còn được sử dụng để hủy cuộc hẹn</i><br /><br /> -->
			</div>
		</div>
	</div>
	</div>
	</s:form>
</s:if>
<s:else>
	<div class="bookingTitle">
		<h4>Tính năng đặt hẹn khám trực tuyến chưa kích hoạt.</h4>
	</div>
</s:else>
</body>
</html>